<template>
  <div class="sjgl">
    <el-card class="sjgl-hd" shadow="always">
      <div class="box">
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.increment_users }}</span>
          </div>
          <span class="text">今日新增用户</span>
        </div>
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.total_users }}</span>
          </div>
          <span class="text">总用户量</span>
        </div>
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.increment_questions }}</span>
          </div>
          <span class="text">新增试题</span>
        </div>
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.total_questions }}</span>
          </div>
          <span class="text">总试题量</span>
        </div>
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.total_done_questions }}</span>
          </div>
          <span class="text">总刷题量</span>
        </div>
        <div class="fist">
          <div class="rids">
            <span class="num">{{ titleTad.personal_questions }}</span>
          </div>
          <span class="text">人均刷题量</span>
        </div>
      </div>
    </el-card>
    <el-card shadow="always" class="sjgl-bom">
      <ChartBig :data="option" />
    </el-card>
  </div>
</template>

<script>
import { DataTitle, DataStatistics } from "@/api/sjgl";
export default {
  data() {
    return {
      option: [
        {
          name: "", //int	企业名称
          value: "", //	int	题目数量
        },
      ],
      titleTad: {
        total_done_questions: 0,
        personal_questions: 0,
        total_users: 0,
        increment_users: 0,
        increment_questions: 0,
        total_questions: 0,
      },
    };
  },
  async created() {
    const res = await DataTitle(this.titleTad);
    //  console.log(res);
    this.titleTad = res.data;
    //  console.log(this.titleTad);

    const res2 = await DataStatistics();
    //  console.log(res2);
    this.option = res2.data;
  },
};
</script>

<style scoped lang="less">
.sjgl {
  .sjgl-hd {
    height: 180px;
    width: 100%;
    .box {
      padding: 0 20px;
      width: 100%;
      height: 100%;
      display: flex;

      justify-content: space-around;
      .fist {
        width: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .rids {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 8px;
          margin-bottom: 6px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 2px solid #008000;
        }
      }
    }
  }
  .sjgl-bom {
    height: 500px;
  }
}
</style>
